$(function() {
    // 需求1: 点击a链接，切换显示效果;
    $("#loginBox a").on('click', function() {
        // 登录模块中的a被点击，隐藏登录模块，显示注册模块;
        $("#loginBox").hide();
        $("#regBox").show();
    });
    $("#regBox a").on('click', function() {
        // 注册模块中的a被点击，隐藏注册模块，显示登录模块;
        $("#regBox").hide();
        $("#loginBox").show();
    });

    // 需求2: 自定义校验规则;
    // console.log(layui);
    let form = layui.form;
    // form.verify()可以自定义校验规则
    //  规则的参数是对象，里面的属性做规则名称，值是具体的规则
    form.verify({
        // 属性做规则名称, 值是具体的规则
        // 值有两类: 函数和数组！
        username: [
            // 数组中必须放入两个值, 第一个是规则，第二个是报错信息
            /^[a-zA-Z0-9]{1,10}$/,
            '用户名必须是1-10位字母和数字'
        ],
        pwd: [
            /^[\S]{1,10}$/,
            '密码必须1到10位，且不能出现空格'
        ],
        // 确认密码校验规则
        repwd: function(value, item) {
            // value代指 确认密码的值
            // 所以我要获取密码input的值
            // 判断 两个值，不相等就报错
            let pwd = $('#regBox input[name=password]').val();
            if (pwd != value) {
                return '两次密码输入不一致！';
            }
        }
    });

    // 需求3: 注册功能；
    let layer = layui.layer;
    $("#formReg").on('submit', function(e) {
        // 阻止表单默认提交
        e.preventDefault();
        // axios发送ajax
        axios({
            method: 'POST',
            url: '/api/reguser',
            // 大事件的后端，只支持 application/x-www-form-urlencoded 这种类型
            //   只支持 a=1&b=2&c=3    不支持  '{"a":1,"b":2,"c":3}'
            data: $(this).serialize()
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                // return alert(res.data.message);
                return layer.msg(res.data.message);
            }
            // 成功提示 - 提示框美化
            // alert('恭喜您，注册用户成功！');
            layer.msg('恭喜您，注册用户成功！');
            // 清空表单 - DOM对象的 reset();
            $("#formReg")[0].reset();
            // 切换到登录区域
            $("#regBox a").click();
        });

    })

    // 需求4: 登录功能;
    $('#formLogin').on('submit', function(e) {
        // 阻止表达默认提交
        e.preventDefault();
        // axios发送ajax
        axios({
            method: 'POST',
            url: '/api/login',
            // 后端只接受 a=1&b=2&c=3 格式参数
            data: $(this).serialize()
        }).then(({
            data: res
        }) => {
            // 判断业务状态码
            if (res.status != 0) {
                return layer.msg(res.message);
            }
            // 提示
            layer.msg('恭喜您，登录成功！');
            // 跳转到大事件首页
            location.href = '/index.html';
            // 保存token，保存到本地存储
            localStorage.setItem('token', res.token);
        });
    })
});